<%@page import="com.solution.common.config.PublicConfig"%>
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<c:set var="rootPath" value="<%=PublicConfig.ROOT_PATH%>" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="${rootPath}/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="${rootPath}/layuiadmin/style/admin.css" media="all">
<script type="text/javascript">
	var rootPath = '${rootPath}';
</script>
</head>
<body>
	<div class="layui-fluid">
		<div class="layui-card">
			<div class="layui-form layui-card-header layuiadmin-card-header-auto">
				<div class="layui-form-item">
					<div class="layui-row">
						<div class="layui-block layui-col-md3">
							<label class="layui-form-label">登录账号</label>
							<div class="layui-input-block">
								<input type="text" id="userCode" name="userCode" placeholder="请输入登录账号" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-block layui-col-md3">
							<label class="layui-form-label">用户昵称</label>
							<div class="layui-input-block">
								<input type="text" id="userName" name="userName" placeholder="请输入用户昵称" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-block layui-col-md3">
							<label class="layui-form-label">电话号码</label>
							<div class="layui-input-block">
								<input type="text" id="mobile" name="mobile" placeholder="请输入电话号码" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-block layui-col-md3">
							<label class="layui-form-label">状态</label>
							<div class="layui-input-block" id="con_user_status">
							</div>
						</div>
					</div>
					
					<div class="layui-row" style="margin-top:20px;">
						<div class="layui-block layui-col-md3">
							<label class="layui-form-label">角色</label>
							<div class="layui-input-block" id="con_user_role">
							</div>
						</div>
						<div class="layui-block layui-col-md6">
							&nbsp;
						</div>
						<div class="layui-block layui-col-md3">
							<label class="layui-form-label"></label>
							<button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="btn_search">搜索
								<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
							</button>
							<button class="layui-btn layui-btn-primary" id="btn_reset">重置
							</button>
						</div>
					
					</div>
					
				</div>
			</div>

			<div class="layui-card-body">
				<div style="padding-bottom: 10px;">
					<button id="btn_add"  class="layui-btn layuiadmin-btn-useradmin" data-type="add">添加</button>
				</div>

				<table id="user_table" lay-filter="lay_user_table"></table>
				
				<script type="text/html" id="imgTpl"> 
          			<img style="display: inline-block; width: 50%; height: 100%;" src= {{ d.avatar }}>
        		</script>
			
				<script type="text/html" id="table-useradmin-webuser">
          			<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
          			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
        		</script>
			</div>
		</div>
	</div>
	
	
	
	<script src="${rootPath}/layuiadmin/layui/layui.all.js"></script>
	
	<!-- 模板 专区 -->
	
	<!-- 用户状态模板 -->
	<script type="text/html" id="user_status"> 
		<select id='status' name="status">
			<option value="">请选择</option>
			{{#  layui.each(d, function(index, item){ }}
			<option value="{{ item.k }}">{{ item.v }}</option>
  			{{#  }); }}
		</select>
	</script>
	
	<!-- 用户角色模板 -->
	<script type="text/html" id="user_role"> 
		<select id="roleId"  name="roleId">
			<option value="">请选择</option>
			{{#  layui.each(d, function(index, item){ }}
			<option value="{{ item.id }}">{{ item.roleName }}</option>
  			{{#  }); }}
		</select>
	</script>
	
	<script type="text/html" id="toolBar">
  		<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
		{{# if(d.status == '1' ){ }}
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="disable"><i class="layui-icon layui-icon-close"></i>停用</a>
		{{# } }}
		{{# if(d.status == '0' ){ }}
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="enable"><i class="layui-icon layui-icon-ok"></i>启用</a>
		{{# } }}
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
	</script>
	
	<script style="text/javascript">
		;!function(){
			var layer = layui.layer;
			var form = layui.form;
			var $ = layui.$;
			var table = layui.table;
			var laytpl = layui.laytpl;
			
			// 渲染状态下拉框
			var tpl = $("#user_status").html();
			laytpl(tpl).render(window.parent.dictMap.status, function(html){
				$("#con_user_status").html(html);
			});
			form.render('select');
			
			
			// 渲染角色下拉框 
			$.ajax({
				type : 'post',
				url : rootPath + "/role/listRole",
				data:{},
				dataType : 'json',
				success : function(data){
					var tpl = $("#user_role").html();
					laytpl(tpl).render(data, function(html){
						$("#con_user_role").html(html);
					});
					form.render('select'); 
				},
				error : function(){
					layer.msg("请求失败,请稍后再试!");
				}
			});
			
			
			table.render({
				elem : '#user_table',
				url : rootPath + "/user/listUserPage",
				method : 'post',
				page : true ,
				cols : [[
					{ field: 'id', title: '序号', type : 'numbers'},
					{ field: 'userCode', title: '工号'},
					{ field: 'userName', title: '用户名称'},
					{ field: 'orgName', title: '部门'},
					{ field: 'roleName', title: '角色'},
					{ field: 'mobile', title: '电话'},
					{ field: 'userType', title: '用户类型' , 
						templet:function(d){
							var result = window.parent.getDictName('userType', d.userType);
							return result ? result : '--';
						}
					},
					{ field: 'status', title: '状态',
						templet : function(d){
							return window.parent.getDictName('status', d.status);
						}
					},
					{fixed: 'right', width:200, align:'center', toolbar: '#toolBar'}
				]]
			});
			
			
			table.on('tool(lay_user_table)', function(obj){
				var data = obj.data;
				var layEvent = obj.event; 
				
				if(layEvent === 'enable'){
					layer.confirm('您确定要启用该条记录吗？', function(index){
						$.ajax({
		            		type : 'post',
		            		url : rootPath + '/user/enableUser',
		            		dataType : 'json',
		            		data : {id : data.id},
		            		success : function(res){
		            			if(res.resultCode == '1'){
		            				layer.msg('启用用户成功', {time : 1000});
		            				table.reload('user_table');
		            			}else{
		            				layer.msg('启用用户失败', {time : 1000});
		            			}
		            		},
		            		error : function(){
		            			layer.msg('启用用户失败', {time : 1000});
		            		}
		            	});
					});
				}
				 
				if(layEvent === 'disable'){
					layer.confirm('您确定要停用该条记录吗？', function(index){
						$.ajax({
		            		type : 'post',
		            		url : rootPath + '/user/disableUser',
		            		dataType : 'json',
		            		data : {id : data.id},
		            		success : function(res){
		            			if(res.resultCode == '1'){
		            				layer.msg('停用用户成功', {time : 1000});
		            				table.reload('user_table');
		            			}else{
		            				layer.msg('停用用户失败', {time : 1000});
		            			}
		            		},
		            		error : function(){
		            			layer.msg('停用用户失败', {time : 1000});
		            		}
		            	});				    	
					});
				}
				
				if(layEvent === 'del'){
					layer.confirm('您确定要删除该条记录吗？', function(index){
						$.ajax({
		            		type : 'post',
		            		url : rootPath + '/user/deleteUser',
		            		dataType : 'json',
		            		data : {id : data.id},
		            		success : function(res){
		            			if(res.resultCode == '1'){
		            				layer.msg('启用用户成功', {time : 1000});
		            				table.reload('user_table');
		            			}else{
		            				layer.msg('启用用户失败', {time : 1000});
		            			}
		            		},
		            		error : function(){
		            			layer.msg('启用用户失败', {time : 1000});
		            		}
		            	});
					});
				}
				
				if(layEvent === 'edit'){ //编辑
					layer.open({
				    	type: 2,
				    	title: '编辑用户',
				    	content: rootPath + "/user/toUpdateUser?id="+data.id,
				    	maxmin: true,
				    	area: ['600px', '550px'],
				    	btn: ['确定', '取消'],
				    	yes: function(index, layero){
				    		// iframe 容口
							var iframeWindow = window['layui-layer-iframe'+ index]
				    		// 表单上的 lay-fitler 属性值
				            var submitID = 'user_form_submit';
				    		// 根据提交表单按钮元素
				            var submit = layero.find('iframe').contents().find('#'+ submitID);
				            //监听提交
				            iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
				            	//获取提交的字段
				              	var field = data.field;
				            	$.ajax({
				            		type : 'post',
				            		url : rootPath + '/user/saveOrUpdateUser',
				            		dataType : 'json',
				            		data : field,
				            		success : function(res){
				            			if(res.resultCode == '1'){
				            				layer.msg('修改用户成功', {time : 1000});
				            				table.reload('user_table');
				            			}else{
				            				layer.msg('修改用户成功', {time : 1000});
				            			}
				            		},
				            		error : function(){
				            			layer.msg('修改用户成功', {time : 1000});
				            		}
				            	});
				              	layer.close(index); 
				            });
				            // 出发单击事件
				            submit.trigger('click');
				          }
				  	}); 
				}
			});
			
			//监听搜索
		    form.on('submit(btn_search)', function(data){
		    	var field = data.field;
		      	//执行重载
		      	table.reload('user_table', {
		        	where: field
		      	});
		   	});
			
			
		 // 重置表单
			$("#btn_reset").click(function(){
				$("#userCode").val('');
				$("#userName").val('');
				$("#mobile").val('');
				$("#status").val('');
				$("#roleId").val('');
				form.render('select');
			});
			
			// 添加
			$("#btn_add").click(function(){
				layer.open({
			    	type: 2,
			    	title: '添加用户',
			    	content: rootPath + "/user/toAddUser",
			    	maxmin: true,
			    	area: ['600px', '550px'],
			    	btn: ['确定', '取消'],
			    	yes: function(index, layero){
			    		// iframe 容口
						var iframeWindow = window['layui-layer-iframe'+ index]
			    		// 表单上的 lay-fitler 属性值
			            var submitID = 'user_form_submit';
			    		// 根据提交表单按钮元素
			            var submit = layero.find('iframe').contents().find('#'+ submitID);
			            //监听提交
			            iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
			            	//获取提交的字段
			              	var field = data.field;
			            	$.ajax({
			            		type : 'post',
			            		url : rootPath + '/user/saveOrUpdateUser',
			            		dataType : 'json',
			            		data : field,
			            		success : function(res){
			            			if(res.resultCode == '1'){
			            				layer.msg('添加用户成功', {time : 1000});
			            				table.reload('user_table');
			            			}else{
			            				layer.msg('添加用户成功', {time : 1000});
			            			}
			            		},
			            		error : function(){
			            			layer.msg('添加用户成功', {time : 1000});
			            		}
			            	});
			              	layer.close(index); 
			            });
			            // 出发单击事件
			            submit.trigger('click');
			          }
			  	}); 
			});
		}();
  	</script>
</body>
</html>

